<template>
  <div class="inventory-management">
    <page>
      <div slot="top">
        <el-form label-width="100px" size="small" :inline="true">
          <el-form-item label="产品编码">
            <el-input class="query-item" v-model="queryParmars.prodCode" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="所属隧道">
            <el-input class="query-item" v-model="queryParmars.tunnel" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="隧道部位">
            <el-select placeholder="请选择" v-model="queryParmars.tunnelArea" class="query-item">
              <el-option
                v-for="item in tunnelPartsOptions"
                :key="item.id"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工字钢类型">
            <el-input class="query-item" v-model="queryParmars.steel" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="单元">
            <el-select placeholder="请选择" v-model="queryParmars.unit" class="query-item">
              <el-option v-for="item in unitOptions" :key="item.id" :label="item.dictLabel" :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="btn-query">
            <el-button type="primary" @click="getTableData(1)">查询</el-button>
            <el-button @click="resetHandle">重置</el-button>
          </el-form-item>
          <el-form-item style="position: absolute;right:30px">
            <el-radio-group v-model="value1" @input="radioInput">
              <el-radio-button v-for="(item, index) in list1" :label="item.code" :key="index">{{item.name}}</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="body">
        <el-table :data="tableData" border>
          <el-table-column label="序号" width="50px" type="index"></el-table-column>
          <el-table-column label="产品编号" prop="prodCode"></el-table-column>
          <el-table-column label="产品类型" prop="prodType">
            <template slot-scope="scope">
              <span>{{
                (list1.find(item => item.code == scope.row.prodType) || {}).name ||
                scope.row.prodType
              }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="value1=='ggj'" label="弧长" prop="arcLength"></el-table-column>
          <el-table-column v-if="value1=='ggj'" label="弦高" prop="height"></el-table-column>
          <el-table-column v-if="value1=='ggj'" label="半径" prop="radius"></el-table-column>
          <el-table-column v-if="value1=='ggj'" label="工字钢规格" prop="steel"></el-table-column>

          <el-table-column v-if="value1=='wp'" label="长" prop="arcLength"></el-table-column>
          <el-table-column v-if="value1=='wp'" label="宽" prop="prodWide"></el-table-column>
          <el-table-column v-if="value1=='wp'" label="钢筋规格" prop="rebarSpecifications"></el-table-column>

          <el-table-column v-if="value1=='ljg'" label="长" prop="arcLength"></el-table-column>
          <el-table-column v-if="value1=='ljg'" label="宽" prop="prodWide"></el-table-column>
          <el-table-column v-if="value1=='ljg'" label="厚" prop="proThick"></el-table-column>
          <el-table-column v-if="value1=='ljg'" label="钢板规格" prop="steelPlateSpecifications"></el-table-column>

          <el-table-column v-if="value1=='xdg'" label="长" prop="arcLength"></el-table-column>
          <el-table-column v-if="value1=='xdg'" label="止浆段长度" prop="prodLong"></el-table-column>
          <el-table-column v-if="value1=='xdg'" label="小导管规格" prop="conduitSpecifications"></el-table-column>
          <!-- <el-table-column label="产品编码" prop="prodCode" align="center"></el-table-column>
          <el-table-column label="所属隧道" prop="tunnel" align="center"></el-table-column>
          <el-table-column label="工字钢类型" prop="steel" align="center"></el-table-column>
          <el-table-column label="单元" prop="unit" align="center">
            <template slot-scope="scope">
              <span>{{
                (unitOptions.find(item => item.dictValue == scope.row.unit) || {}).dictLabel || scope.row.unit
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="隧道部位" prop="tunnelArea" align="center">
            <template slot-scope="scope">
              <span>{{
                (tunnelPartsOptions.find(item => item.dictValue == scope.row.tunnelArea) || {}).dictLabel ||
                scope.row.tunnelArea
              }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="已生产" prop="quantity" align="center"></el-table-column>
          <el-table-column label="剩余库存" prop="inventory" align="center"></el-table-column>
          <el-table-column label="操作" width="200px" align="center">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="openHandle(1, scope.row)"> 入库记录 </el-link>
              <el-link type="primary" :underline="false" @click="openHandle(2, scope.row)"> 出库记录 </el-link>
              <el-link type="primary" :underline="false" @click="openOutbound(scope.row)">出库</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-pagination
          background
          :page-size="pageVO.pageSize"
          :current-page.sync="pageVO.pageNum"
          :total="pageVO.total"
          :layout="pageOptions.layout"
          :page-sizes="pageOptions.pageSizes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <outbound ref="outboundRef" @submit="getTableData(1)" />
      <warehousingDialog ref="warehousingDialogRef" />
    </page>
  </div>
</template>

<script>
import pageQuery from '../../mixins/pageQuery';
import { getDicts, getInventoryList } from '@/api/inventory';
import { getprolist } from '@/api/product';
import warehousingDialog from './warehousingDialog.vue';
import outbound from './outbound.vue';

export default {
  mixins: [pageQuery],
  components: { warehousingDialog, outbound },
  data() {
    return {
      list1: [],
      value1: 'ggj',
      tunnelPartsOptions: [],
      unitOptions: [],
      queryParmars: {
        prodCode: '',
        tunnel: '',
        tunnelArea: '',
        steel: '',
        unit: '',
      },
    };
  },
  created() {
    getDicts({ dictType: 'sys_tunnel_area' }).then(res => {
      this.tunnelPartsOptions = res.data.data;
    });
    getDicts({ dictType: 'sys_prod_unit' }).then(res => {
      this.unitOptions = res.data.data;
    });
    this.getprolist()
    this.getTableData();
  },
  methods: {
    openOutbound(row) {
      this.$refs.outboundRef.openHandle(row);
    },
    openHandle(type, row) {
      this.$refs.warehousingDialogRef.openHandle(type, row);
    },
    resetHandle() {
      this.queryParmars = {
        prodCode: '',
        tunnel: '',
        tunnelArea: '',
        steel: '',
        unit: '',
      };
      this.getTableData(1);
    },
    getprolist() {
      getprolist().then(res =>{
        if(res.success == true){
          this.list1 = res.data
        }
      })
    },
    radioInput(e){
      this.getTableData()
    },
    getTableData(pageNum) {
      if (pageNum) {
        this.pageVO.pageNum = pageNum;
      }
      getInventoryList({
        ...this.queryParmars,
        prodType: this.value1,
        pageNo: this.pageVO.pageNum,
        pageSize: this.pageVO.pageSize,
        projectId: this.$store.getters.projectId,
      }).then(res => {
        const { data, total } = res.data || {};
        this.tableData = data || [];
        this.pageVO.total = total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.inventory-management {
  .btn-query {
    margin-left: 30px;
  }
}
</style>
